<template>
    <div class="page">
        <h1 class="title fadeInTop" :class="{done:showTitle}"></h1>
        <div class="txt1 fadeInTop" :class="{done:showT1}"></div>
        <sub class="line fadeLine" :class="{done:showLine}"></sub>
        <div class="txt2 fadeInTop" :class="{done:showT2}"></div>
        <div class="bg fadeBg" :class="{done:done}"></div>
    </div>
</template>

<script>
export default {
    name: 'page',
    props: ['animate'],
    data () {
        return {
            done: false,
            showTitle: false,
            showT1: false,
            showLine: false,
            showT2: false,
        }
    },
    methods: {
        pageInit() {
            this.done = true;
            setTimeout(() => {
                this.showTitle = true;
            }, 200);
            setTimeout(() => {
                this.showT1 = true;
            }, 500);
            setTimeout(() => {
                this.showLine = true;
            }, 800);
            setTimeout(() => {
                this.showT2 = true;
            }, 1100);
        }
    },
    mounted () {
        if (this.animate) {
            this.pageInit();
        }
    },
    watch: {
        animate(v) {
            if (v && !this.done){
                this.pageInit();
            }
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("../assets/images/bg_p1.jpg");
        background-position: center center;
        background-size: cover;
    }
    .title {
        position: absolute;
        left: 50%;
        top: 0.8rem;
        display: block;
        width: 3rem;
        height: 1rem;
        background: url("../assets/images/logo_p1.png");
        background-size: 100% 100%;
        z-index: 2;
        margin-left: -1.5rem;
    }
    .txt1 {
        position: absolute;
        left: 50%;
        top: 2.3rem;
        width: 5.7rem;
        height: 0.8rem;
        background: url("../assets/images/text_p1.png");
        background-size: 100% 100%;
        z-index: 2;
        margin-left: -2.85rem;
    }
    .line {
        position: absolute;
        left: 50%;
        top: 3.3rem;
        width: 5.7rem;
        height: 1px;
        background: #fff;
        z-index: 2;
        margin-left: -2.85rem;
    }
    .txt2 {
        position: absolute;
        left: 50%;
        top: 3.6rem;
        width: 5rem;
        height: 0.88rem;
        background: url("../assets/images/text_2_p1.png");
        background-size: 100% 100%;
        z-index: 2;
        margin-left: -2.5rem;
    }
}
</style>
